<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" label-width="100px">
        <el-row class="search-input">
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" maxlength="80" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="支付方式：">
            <el-select v-model="filters.payType" placeholder="全部" style="width: 200px;">
              <el-option label="网上支付" value="1">网上支付</el-option>
              <el-option label="线下支付" value="2">线下支付</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分销员名称：">
            <el-input v-model="filters.distributorName" maxlength="80" placeholder="请输入分销员名称" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage()"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <cy-table
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import CyTable from "@/views/Core/JicTable";

  export default {
    components: {
      KtButton,
      CyTable
    },
    data() {
      return {
        filters: {
          distributorName:"",
          orderNo: "",
          payType: "",
          distributorId: this.$route.query.distributorId
        },
        options: [],
        size: "mini",
        columns: [
          {prop: "orderNo", label: "订单编号", minWidth: 210},
          // {prop: "buyName", label: "购买人", minWidth: 180},
          {prop: "orderType", label: "订单类型", minWidth: 120, formatter: this.typeFormat},
          {prop: "orderStatus", label: "订单状态", minWidth: 120, formatter: this.statusFormat},
          {prop: "buyAccount", label: "下单用户账号", minWidth: 180},
          {prop: "orderTime", label: "下单时间", minWidth: 180},
          {prop: "orderTotalAmount", label: "订单总金额", minWidth: 150},
          {prop: "payStatus", label: "支付状态", minWidth: 120, formatter: this.payStatusFormat},
          {prop: "payType", label: "支付方式", minWidth: 120, formatter: this.payTypeFormat},
          {prop: "belonging", label: "所属方式", minWidth: 180},
          {prop: "createTime", label: "创建时间", minWidth: 180}
        ],
        filterColumns: [{
          orderNo:"qerq121sfa",
          orderType:"1",
          orderStatus:"1",
          buyAccount:"10000000",
          orderTime: "2020-9-28",
          orderTotalAmount: "1314",
          payStatus: "1314",
          payType:"2",
          belonging:"",
          createTime: "2020-9-28",
        }],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
      };
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this;
        if (this_.filters == undefined || this_.filters == "") {
          this_.filters = {};
        }
        this_.filters.pageNum = this.pageRequest.pageNum;
        this_.filters.pageSize = this.pageRequest.pageSize;
        // this.utils.request.getOrderParentSale(this_.filters, function (res) {
          // if (res.data.rows.length==0) {
          //   this_.$message({message: "查询暂无数据", type: "warning"});
          // }
          this_.$refs.CyTable.findPage({
            content: this_.filterColumns,
            total: 10
          });
        // });
      },
      resetForm(formName) {
        if (this.filters.orderNo == ""
          && this.filters.payType == ""
          && this.filters.distributorName == ""
        ) {
          this.$message({message: "请输入查询条件", type: "warning"});
          return false
        }
        this.filters = {
          distributorName:"",
          orderNo: "",
          payType: "",
          distributorId: this.$route.query.distributorId
        }
        this.findPage()
      },
      statusFormat: function (row, column, cellValue, index) {
        if (cellValue == 10) {
          return "已完成";
        } else if (cellValue == 1) {
          return "待支付";
        } else if (cellValue == 2) {
          return "已支付";
        } else if (cellValue == 3) {
          return "待发货";
        } else if (cellValue == 4) {
          return "已发货";
        } else if (cellValue == 5) {
          return "确认收货";
        } else if (cellValue == 6) {
          return "待评价";
        } else if (cellValue == 7) {
          return "已关闭";
        } else if (cellValue == 8) {
          return "付款处理中";
        } else if (cellValue == 9) {
          return "已退款";
        }
      },
      payStatusFormat: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return "待支付";
        } else if (cellValue == 2) {
          return "已支付";
        } else if (cellValue == 3) {
          return "已关闭";
        } else if (cellValue == 4) {
          return "部分关闭";
        }
      },
      payTypeFormat: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return "网上支付";
        } else if (cellValue == 2) {
          return "线下支付";
        }
      },
      typeFormat: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return "普通下单";
        } else if (cellValue == 2) {
          return "代客下单";
        }
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];

        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      }
    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped lang='scss'>
  .btn-left {
    margin-left: 45px;
  }

  /deep/ .el-button-group {
    margin-bottom: 0px !important;
  }
</style>
